<template>
	<div>
		<u-popup class="del" v-model="show" mode="bottom" border-radius="30" :closeable="true" close-icon-pos="top-left" close-icon="arrow-down" @close="cancel" :safe-area-inset-bottom="true">
			<div class="mask flex" v-show="delLoading"><u-loading class="del-loading" size="90" color="#999"></u-loading></div>
			<div class="title">添加预警词<span class="del-submit" @click="submit">确定</span></div>
			<div class="content" v-if="row">
				<div class="box">
					<u-radio-group v-model="type" size="30" :wrap="true">
						<u-radio name="1"><span class="radio-text">排除域名：{{row.gather_site_domain}}</span></u-radio>
						<u-radio name="2"><span class="radio-text">排除作者：{{row.name}}</span></u-radio>
					</u-radio-group>
				</div>
				<div class="subject">
					<u-loading :show="subjectLoading" class="loading"></u-loading>
					<div>
						<u-checkbox v-model="isAll" @change="checkedAll"><span class="label">全选</span></u-checkbox>
					</div>
					<u-checkbox-group @change="subjectChange" :wrap="true" size="30">
						<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.id"><span class="label">{{item.title}}</span></u-checkbox>
					</u-checkbox-group>
				</div>
			</div>
		</u-popup>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { exceptList, exceptQuick } from "@/api/warn.js";
export default {
	props: {
		row: {
			type: Object,
			default: {}
		},
		isWarnWord: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			type: 1,
			params: {
				ids: [],
			},
			list: [],
			subjectLoading: false,
			delLoading: false,
			isAll: false
		};
	},
	computed: {
		show: {
			get() {
				if(this.isWarnWord && !this.list.length) this.getSubject();
				return this.isWarnWord;
			},
			set(value) {
				this.$parent.isWarnWord = value;
			}
		},
	},
	methods: {
		getSubject() {
			this.subjectLoading = true;
			exceptList().then(({code,data})=>{
				this.subjectLoading = false;
				if(code == 200){
					this.list = data.map(item=>{
						return{
							...item,
							checked: false
						}
					})
				}
			});
		},
		submit() {
			this.params.ids = this.list.filter(i=>i.checked == true).map(i=>i.id);
			this.params.except_domain = undefined;
			this.params.except_author = undefined;
			if(this.type == 1){
				this.params.except_domain = this.row.gather_site_domain;
			}else{
				this.params.except_author = this.row.name;
			}
			this.delLoading = true;
			exceptQuick(this.params).then(({code})=>{
				this.delLoading = false;
				if(code == 200){
					this.$refs.uToast.show({
						title: "添加成功",
						type: "success",
					});
					this.cancel();
				}
			});
		},
		subjectChange(e) {
			let checkedArr = this.list.filter(i=>i.checked == true);
			if(checkedArr.length>0 && checkedArr.length==this.list.length){
				this.isAll = true;
			}else{
				this.isAll = false;
			}
		},
		checkedAll(val) {
			this.list.map(i=>{
				i.checked = val.value;
			});
		},
		cancel() {
			this.$emit("close");
		},
	}
}
</script>

<style lang="scss">
.del{
	.mask{
		position: absolute;
		z-index: 100;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(255, 255, 255, 0.3);
		justify-content: center;
		align-items: center;
	}
	.title{
		margin-top: 10rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		z-index: 1;
		border-bottom: 2rpx solid #eee;
		
		.del-submit{
			position: absolute;
			z-index: 1;
			right: 40rpx;
			color: #E60012;
		}
	}
	.content{
		padding: 30rpx;
		.row{
			align-items: center;
			margin-bottom: 20rpx;
		}
		.radio-text{
			font-size: 28rpx;
		}
		.label{
			font-size: 28rpx;
		}
		.check-box{
			margin-bottom: 10rpx;
		}
		.subject{
			border-top: 2rpx solid #eee;
			padding: 10rpx 0;
		}
	}
	.tip{
		font-size: 24rpx;
		color: #639cf2;
		background-color: #EDF3FD;
		padding: 8rpx;
	}
}
</style>